<button class="btn btn-dark" (click)="toTopOfScreen()" id="toTopButton" title="Go to top">
    <img class="img-fluid cardIcon" id="topBtn" src="{{'assets/images/btn_arrow.png'}}">
</button>
<div *ngIf="isLoaded == false" class="loader">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>
<div class="row justify-content-around p-2">
    <div class="col-12 col-lg-10 row justify-content-between m-2">
        <div class="col-4 col-sm-3 col-lg-2">
            <label for="character">{{'KEYWORD.CHARACTER' | translate}}</label>
            <select [(ngModel)]="filterConditions[0]" (ngModelChange)="filterCards()" class="custom-select"
                name="character">
                <option value="All">All</option>
                <option value="LUKE">{{'KEYWORD.LUKE' | translate}}</option>
                <option value="ARTEM">{{'KEYWORD.ARTEM' | translate}}</option>
                <option value="VYN">{{'KEYWORD.VYN' | translate}}</option>
                <option value="MARIUS">{{'KEYWORD.MARIUS' | translate}}</option>
            </select>
        </div>
        <div class="col-4 col-sm-3 col-lg-2">
            <label for="rarity">{{'KEYWORD.RARITY' | translate}}</label>
            <select [(ngModel)]="filterConditions[1]" (ngModelChange)="filterCards()" class="custom-select"
                name="rarity">
                <option value="All">All</option>
                <option value="R">R</option>
                <option value="MR">MR</option>
                <option value="SR">SR</option>
                <option value="SSR">SSR</option>
            </select>
        </div>
        <div class="col-4 col-sm-3 col-lg-2">
            <label for="type">{{'KEYWORD.TYPE' | translate}}</label>
            <select [(ngModel)]="filterConditions[2]" (ngModelChange)="filterCards()" class="custom-select" name="type">
                <option value="All">All</option>
                <option value="LOGIC">{{'KEYWORD.LOGIC' | translate}}</option>
                <option value="EMPATHY">{{'KEYWORD.EMPATHY' | translate}}</option>
                <option value="INTUITION">{{'KEYWORD.INTUITION' | translate}}</option>
            </select>
        </div>
        <div class="col-12 col-sm-1 d-flex justify-content-center align-items-center">
            <a class="mt-2" (click)="resetFilters()" style="cursor: pointer;">
                <img src="assets/images/btn_reset.png">
            </a>
        </div>
    </div>
    <div class="col-12 col-lg-10 row justify-content-around mt-4">
        <div class="col-3 col-md-2 my-1" *ngFor="let c of cards">
            <a [routerLink]="['/card-value-setting/']" [queryParams]="{id: c._id}" routerLinkActive="active">
                <img class="img-fluid" src="{{imgURL + c.character + '/' + c.ref + '.webp'}}">
            </a>
        </div>
    </div>